/* 动画区 */


@keyframes centerLogo {
    0% {
        opacity: 0;
      
        transform: translateY(1vw) scale(80%);
        
    }
    100% {
        opacity: 1;
      
        transform: translateY(0vw) scale(100%);
    }
}
@keyframes BHLogo {
    0% {
        opacity: 0;
        transform: translateY(4vw) scale(98%);
        
        
    }
 
    100% {
        opacity: 1;
        transform: translateY(0vw) scale(100%);
    }
}
@keyframes oneCircle {
    0% {
        opacity: 0;
        width: 0vw;
        height: 0vw;
    }
    70% {
        opacity: 1;
        width: 15vw;
        height: 15vw;
    }
    100% {
        opacity: 1;
        width: 14vw;
        height: 14vw;
    }
}

@keyframes twoCircle {
    0% {
        opacity: 0;
        width: 0vw;
        height: 0vw;
    }
    70% {
        opacity: 1;
        width: 26vw;
        height: 26vw;
    }
    100% {
        opacity: 1;
        width: 24vw;
        height: 24vw;
    }
}

@keyframes oneStar {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: rotate(50deg);
        opacity: 1;
    }
}
@keyframes twoStar {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: rotate(170deg);
        opacity: 1;
    }
}
@keyframes threeStar {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: rotate(300deg);
        opacity: 1;
    }
}

@keyframes oneBigStar {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: rotate(95deg);
        opacity: 1;
    }
}
@keyframes twoBigStar {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: rotate(230deg);
        opacity: 1;
    }
}
@keyframes threeBigStar {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    100% {
        transform: rotate(350deg);
        opacity: 1;
    }
}

@keyframes r1 {
   0% {
    transform: rotate(90deg);
   
   } 
   100% {
    transform: rotate(450deg);
   
   } 
}
@keyframes r2 {
    0% {
     transform: rotate(0deg);
    
    } 
    100% {
     transform: rotate(360deg);
    
    } 
 }
 @keyframes r3 {
    0% {
     transform: rotate(250deg);
    
    } 
    100% {
     transform: rotate(610deg);
    
    } 
 }

 @keyframes r4 {
    0% {
     transform: rotate(30deg);
    
    } 
    100% {
     transform: rotate(390deg);
    
    } 
 }
 @keyframes r5 {
     0% {
      transform: rotate(200deg);
     
     } 
     100% {
      transform: rotate(560deg);
     
     } 
  }
  @keyframes r6 {
     0% {
      transform: rotate(300deg);
     
     } 
     100% {
      transform: rotate(660deg);
     
     } 
  }
  @keyframes r7 {
    0% {
     transform: rotate(160deg);
    
    } 
    100% {
     transform: rotate(520deg);
    
    } 
 }
@keyframes toBig {
    0% {
        transform: scale(0%);
        opacity: 0;
        box-shadow: 0px 0px 0px 0px #bbbbbb;
       
    }

    100% {
        transform: scale(100%);
        opacity: 1;
        box-shadow: 1px 1px 10px -1px #bbbbbb;
        
    }
}
@keyframes toBig2 {
    0% {
        width: 0vw;
        height: 0vw;
        opacity: 0;
        box-shadow: 0px 0px 0px 0px #bbbbbb;
        font-size: 0vw;
       
    }

    100% {
        width: 4vw;
        height: 4vw;
        opacity: 1;
        box-shadow: 1px 1px 10px -1px #bbbbbb;
        font-size: 1.1vw;
        
    }
}

body{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #111;
}
.centerLogo {

    width: 9.5vw;
    opacity: 0;
    animation-name: centerLogo;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-fill-mode:forwards;
   
}
.oneCircle {
    position: absolute;
    opacity: 0;
    border-radius: 30vw;
    border: 1px solid #fff;

    animation-name: oneCircle;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.8s;
    animation-fill-mode:forwards;
    box-shadow: 1px 1px 10px -2px #bbbbbb;
}
.twoCircle {
    position: absolute;
    opacity: 0;
    border-radius: 30vw;
    border: 1px solid #fff;

    animation-name: twoCircle;
    animation-duration: 1.4s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-fill-mode:forwards;
    box-shadow: 1px 1px 10px -2px #bbbbbb;
}
.baseStar {
    position: absolute;
    
    width: 13.5vw;
    height: 13.5vw;
    opacity: 0;
    z-index: 999;

    
    animation-timing-function: ease-in-out;
    animation-delay: 1.2s;
    animation-fill-mode:forwards;
    animation-duration: 1s;
}
.oneStar {
  animation-name: oneStar;
  animation-duration: 1s;
}
.twoStar {
    animation-name: twoStar;
    animation-duration: 1.2s;
}
.threeStar {
    animation-name: threeStar;
    animation-duration: 1.3s;
    
}
.star {
    position: relative;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    width: 0vw;
    height: 0vw;
    border-radius: 5vw;
    opacity: 1;
    font-family: 'deyihei';
    color: #111;
    font-size: 0vw;
    letter-spacing: 0.1vw;
    font-weight: 700;
    background-color: #fff;
   

    animation-name: toBig2;
    animation-timing-function: ease-in-out;
    animation-delay: 1.5s;
    animation-fill-mode:forwards;
    animation-duration: 1s;

    transition: all 0.2s ease-in-out;

    
}

.baseBigStar {
    position: absolute;
    z-index: 999;
    
    width: 20.5vw;
    height: 20.5vw;
    opacity: 0;

    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-fill-mode:forwards;
    animation-duration: 1s;
}

.oneBigStar {
    animation-name: oneBigStar;
    animation-duration: 1s;
  }
.twoBigStar {
      animation-name: twoBigStar;
      animation-duration: 1.1s;
  }
.threeBigStar {
      animation-name: threeBigStar;
      animation-duration: 1.2s;
      
  }
.miniStar {
    border: 1px solid #fff;
    width: 1.8vw;
    height: 1.8vw;
    border-radius: 3vw;
    background-color: #fff;
    opacity: 0;

    animation-name: toBig;
    animation-timing-function: ease-in-out;
    animation-delay: 1.5s;
    animation-fill-mode:forwards;
    animation-duration: 1s;
}

.baseMiniStar {
    position: absolute;
    z-index: 1;
    width: 12vw;
    height: 12vw;
    opacity: 1;
    

    animation: r1 10s infinite;
    animation-timing-function: linear;
    animation-delay: 1.5s;
    animation-fill-mode:forwards;
    animation-duration: 10s;
}
.mini1 {
    animation-name: r1;
    animation-duration: 30s;
}
.mini2 {
    animation-name: r2;
    animation-duration: 30s;
}
.mini3 {
    animation-name: r3;
    animation-duration:30s;
   
}
.baseMiniStar2 {
    position: absolute;
    z-index: 1;
    width: 19vw;
    height: 19vw;
    opacity: 1;
    

    animation: r1 10s infinite;
    animation-timing-function: linear;
    animation-delay: 1.5s;
    animation-fill-mode:forwards;
    animation-duration: 10s;
}

.mini4 {
    animation-name: r4;
    animation-duration: 50s;
}
.mini5 {
    animation-name: r5;
    animation-duration: 50s;
}
.mini6 {
    animation-name: r6;
    animation-duration:50s;
   
}
.mini7 {
    animation-name: r7;
    animation-duration:50s;
   
}
.Hero {
    position: absolute;
    top: 23.65vw;
    
    width: 19.9vw;
    right:19vw;
}
.Burning {
    position: absolute;
    top: 22vw;
    left: 19.2vw;
    width: 20vw;
}
.Burning,.Hero {
    opacity: 0;
    animation-name: BHLogo;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.3s;
    animation-fill-mode:forwards;
}
.title,.titleEn {
    animation-name: BHLogo;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
   
    animation-fill-mode:forwards;
    position: absolute;
    color: #fff;
    font-weight: 700;
}
.title {  
    top: 45vw;  
}
.titleEn {
    top: 46vw;
   
}
